import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const HorizontalBarChartMeta: IPublicTypeComponentMetadata = {
  componentName: 'HorizontalBarChart',
  title: '水平条形图',
  category: '图表',
  group: '出行服务',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'hzdz-charts',
    version: '0.1.0',
    exportName: 'HorizontalBarChart',
    main: 'src/index.tsx',
    destructuring: true,
    subName: ''
  },
  props: [
    {
      name: 'ref',
      propType: 'object',
    },
    {
      name: 'key',
      propType: 'string',
    },
    {
      name: 'style',
      propType: 'object',
    },
    {
      name: 'className',
      propType: 'string',
    },
    {
      name: 'width',
      propType: 'number',
      description: '组件宽度'
    },
    {
      name: 'height',
      propType: 'number',
      description: '组件高度'
    },
    {
      name: 'data',
      propType: 'array',
      description: '图表数据'
    },
    {
      name: 'maxValue',
      propType: 'number',
      description: '最大值'
    },
    {
      name: 'showLegend',
      propType: 'bool',
      description: '显示图例'
    },
    {
      name: 'showGrid',
      propType: 'bool',
      description: '显示网格'
    },
    {
      name: 'colors',
      propType: 'object',
      description: '颜色配置'
    },
    {
      name: 'labelColor',
      propType: 'string',
      description: '标签颜色'
    },
    {
      name: 'theme',
      propType: 'string',
      description: '主题'
    },
    {
      name: 'onBarClick',
      propType: 'func',
      description: '条形图点击事件'
    },
    {
      name: 'onClick',
      propType: 'func',
      description: '点击事件'
    }
  ],
  configure: {
    props: [
      {
        name: 'maxValue',
        title: { label: { type: 'i18n', 'en-US': 'maxValue', 'zh-CN': '最大值' } },
        setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 400 }
      },
      {
        name: 'showLegend',
        title: { label: { type: 'i18n', 'en-US': 'showLegend', 'zh-CN': '显示图例' } },
        setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true }
      },
      {
        name: 'showGrid',
        title: { label: { type: 'i18n', 'en-US': 'showGrid', 'zh-CN': '显示网格' } },
        setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true }
      },
      {
        name: 'labelColor',
        title: { label: { type: 'i18n', 'en-US': 'labelColor', 'zh-CN': '标签颜色' } },
        setter: { componentName: 'ColorSetter', isRequired: false, initialValue: 'rgba(255,255,255,0.9)' }
      }
    ],
    supports: {
      style: true
    }
  }
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '水平条形图',
    screenshot: '',
    schema: {
      componentName: 'HorizontalBarChart',
      props: {
        width: 500,
        height: 1080,
        data: [
          { id: 'subway', label: '地铁', data: { actual: 350, inbound: 280, outbound: 200 } },
          { id: 'bus', label: '公交', data: { actual: 180, inbound: 150, outbound: 120 } },
          { id: 'taxi', label: '出租车', data: { actual: 300, inbound: 250, outbound: 180 } },
          { id: 'longdist', label: '长运', data: { actual: 220, inbound: 180, outbound: 140 } },
          { id: 'ridehail', label: '网约车', data: { actual: 280, inbound: 230, outbound: 160 } }
        ],
        maxValue: 400,
        showLegend: true,
        legendLabels: {
          actual: '实时出站人数',
          inbound: '实时进站人数',
          outbound: '累计人数'
        },
        colors: {
          actual: '#00FFF1',
          inbound: '#40AEF9',
          outbound: '#FFE292'
        },
        number: {
          topLeft: '123',
          topRight: '222',
          bottomLeft: '333',
          bottomRight: '444',
        },
        labelWidth: 80,
        barHeight: 24,
        spacing: 39,
        showGrid: true,
        labelColor: 'rgba(255,255,255,0.9)',
        theme: 'dark'
      }
    }
  }
];

export default {
  ...HorizontalBarChartMeta,
  snippets
};
